<template>
	<!-- https://blog.csdn.net/qq_58946831/article/details/120075758 -->
	<view :style="{ height: windowHeight + 'px' }">
		<view class="nav-notice">
			<u-notice-bar
				mode="closable"
				@click="jumpPage('/packMyself/message/messageInfo?id=' + noticeInfo.id)"
				:polyline="polyline"
				:text="noticeInfo.noticeTitle + '---' + noticeInfo.noticeBriefly"
				:bgColor="noticeConfig.bgColor"
				:color="noticeConfig.color"
			></u-notice-bar>
		</view>
		<view class="home-box">
			<view class="map-box">
				<map
					id="map"
					:enable-poi="true"
					:show-location="true"
					:markers="covers"
					@markertap="changeSite"
					class="map-box"
					:latitude="latitude"
					:longitude="longitude"
					:style="{ height: mapHeight + 'px' }"
				></map>
			</view>
			<view class="bottom-box">
				<u-row gutter="20">
					<u-col span="3">
						<view class="bottom-content" @click="jumpPage('/pages/store/store?longitude=' + longitude + '&latitude=' + latitude)">
							<view class="content-icon"><u-icon name="home" size="28"></u-icon></view>
							<view class="">附近站点</view>
						</view>
					</u-col>
					<u-col span="6"><u-button type="success" icon="scan" shape="circle" text="扫码充电" @click="getQrCode"></u-button></u-col>
					<u-col span="3">
						<view class="bottom-content" @click="jumpPage('/pages/myself/myself')">
							<view class="content-icon"><u-icon name="account" size="28"></u-icon></view>
							<view class="">个人中心</view>
						</view>
					</u-col>
				</u-row>
			</view>
		</view>
		<view class="site-info" v-if="changeInfo.id" @click="jumpPage('/packHome/siteInfo/siteInfo?id=' + changeInfo.id)">
			<u-cell :icon="chargeIcon" :title="changeInfo.siteName" :label="changeInfo.siteAddress" :isLink="true" :value="putDistance(distanceInfo.linearDistance)"></u-cell>
		</view>
	</view>
</template>

<script>
import { putDistance } from '@/static/js/putDistance.js';
export default {
	data() {
		return {
			putDistance,
			latitude: 0, // 当前位置的纬度
			longitude: 0, // 当前位置的经度
			chargeIcon: '/static/image/icons/charge.png',
			mapHeight: 0, // 地图组件的高度
			windowHeight: 0, // 底部按钮的高度
			noticeConfig: {
				bgColor: '#f20',
				color: '#fff'
			},
			noticeInfo: {}, // 通知信息
			siteList: [], // 站点列表
			covers: [], // 站点在地图的标记点
			distanceInfo: {
				linearDistance: 0
			}, // 距离信息
			changeInfo: {}, // 选择的站点
			polyline: []
		};
	},
	onShow() {
		this.getSystemInfo();
		this.getLocation();
		this.getNotice();
	},
	methods: {
		jumpPage(url) {
			uni.navigateTo({ url });
		},
		// 获取屏幕高度
		getSystemInfo() {
			uni.getSystemInfo({
				success: res => {
					this.windowHeight = res.windowHeight - 60;
					this.mapHeight = (this.windowHeight * 0.9).toFixed(0);
				}
			});
		},
		// 扫一扫二维码
		getQrCode() {
			uni.scanCode({
				scanType: 'qrCode',
				success: res => {
					if (!res.path) {
						return uni.showToast({
							icon: 'none',
							title: `不识别此设备`
						});
					}
					uni.navigateTo({
						url: `/${res.path}`
					});
				}
			});
		},
		// 获取通知列表
		async getNotice() {
			const res = await this.$api.notice.noticeAllList({ limit: 1 });
			this.noticeInfo = res.data.list[0];
		},
		// 选择站点
		async changeSite(info) {
			this.changeInfo = this.siteList[info.markerId];
			const params = {
				longitude: this.longitude, // 当前位置经度
				latitude: this.latitude, // 当前位置纬度
				id: this.changeInfo.id
			};
			// 获取两点的直线主力
			const res = await this.$api.site.siteLinearDistance(params);
			if (res.code === 200) {
				this.distanceInfo = res.data;
			}
		},
		// 获取站点列表
		async getSiteList() {
			const res = await this.$api.site.peripherySiteList({ limit: 99, longitude: this.longitude, latitude: this.latitude });
			this.covers = [];
			if (res.code === 200) {
				if (res.data.list) {
					res.data.list.map((item, index) => {
						// 定义mark点
						this.covers.push({
							id: index, // id 只能为number 用this.siteList的索引做id
							latitude: item.siteLatitude, // 纬度
							longitude: item.siteLongitude, // 经度
							// iconPath: '/static/image/icons/charge.png', // 图标
							width: 18,
							height: 25
						});
					});
				}
				this.siteList = res.data.list;
			}
		},
		// 获取当前位置
		getLocation() {
			uni.getLocation({
				type: 'wgs84',
				success: res => {
					this.longitude = res.longitude;
					this.latitude = res.latitude;
					this.getSiteList();
				}
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.nav-notice {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 9999;
}
.home-box {
	height: 100%;
	padding: 30rpx;
	position: relative;
	.map-box {
		border-radius: 10px;
		border: 1px #fff solid;
		width: 100%;
	}
	.bottom-box {
		margin-top: 60rpx;
	}
	.bottom-content {
		text-align: center;
		font-size: 24rpx;
		.content-icon {
			display: flex;
			justify-content: center;
		}
	}
}
.site-info {
	position: fixed;
	bottom: 200rpx;
	left: 60rpx;
	right: 60rpx;
	background: #fff;
	border-radius: 5px;
	box-shadow: 1px 1px 3px 4px #e4e4e4;
}
</style>
